<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
        <title>table</title>
        <style>
            table{
                width: 50%;
                border: 1px;
                border-collapse: collapse;
                border-spacing: 0;
                text-align: center;
            }
            .hed{
                border-bottom:2px solid  black;
            }
            .ttb tr:nth-child(even){
                background:rgb(225, 243, 143); 
            }
            .ttb tr:nth-child(odd){
                background: rgb(255, 255, 238);
            }
            .hover {
                 background-color: rgb(236, 121, 14);
            }

        </style>
 

    </head>
    <body>
        <section class="tb">
            <table class="ttb" id="table1" > 
                <tr class="hed" style="background: white">
                    <th>姓名</th>
                    <th>性别</th>
                    <th>暂住地</th>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>男</td>
                    <td>浙江宁波</td>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>男</td>
                    <td>浙江宁波</td>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>男</td>
                    <td>浙江宁波</td>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>男</td>
                    <td>浙江宁波</td>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>男</td>
                    <td>浙江宁波</td>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>男</td>
                    <td>浙江宁波</td>
                </tr>
            </table>
        <ction>
    </body>
    

    <script text="text/javascript">
         $('#table1 tr').hover(
             function(){  
            $(this).children('td').addClass('hover')  
            }, 
            function(){  
            $(this).children('td').removeClass('hover')  
            }
        );

    </script>
<ml>
